<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户管理</title>
		<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="${root}/static/css/treeview.min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/treeview.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
	</head>
	<body>
		<div id="app" class="container-fluid">
			<div class="col-md-2" style="margin-top: 20px">
				<button class="btn btn-info" @click="add()">添加</button>
			</div>
			<div class="col-md-2" style="margin-top: 20px">
				<input type="text" v-model="urname" @keyup="search()" placeholder="请输入姓名关键字"
					class="form-control" />
			</div>
			<div class="col-md-2" style="margin-top: 20px">
				<select  class="form-control" @change="changeSt()" v-model="sta">
					<option :value="0">所有</option>
					<option v-for="st in statusS" :value="st.dtkey">{{st.dtvalue}}</option>
				</select>
			</div>
			<table class="table">
				<caption>员工列表</caption>
				<thead>
					<tr>
						<th>编号</th>
						<th>员工登录名</th>
						<th>员工姓名</th>
						<th>员工职位</th>
						<th>员工状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in pager.items">
						<td>{{item.urid}}</td>
						<td>{{item.urname}}</td>
						<td>{{item.urnamezh}}</td>
						<td>{{item.urenamezh}}</td>
						<td>{{item.urstatuszh}}</td>
						<td v-if="item.urreid != 1 && item.urstatus==101">
							<a @click="update(item)"><button class="btn btn-info">修改</button></a>
							<a @click="lock(item.urid)"><button class="btn btn-info">锁定</button></a>
							<a @click="out(item.urid)"><button class="btn btn-info">注销</button></a>
						</td>
						<td v-else-if="item.urreid != 1 && item.urstatus==102">
							<a @click="unlock(item.urid)"><button class="btn btn-info">解锁</button></a>
							<a @click="out(item.urid)"><button class="btn btn-info">注销</button></a>
						</td>
						<td v-else-if="item.urreid != 1 && item.urstatus==103">
							<button class="btn btn-info" disabled="disabled">已注销</button>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6">
							<ul class="pagination">
								<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
								<li><a href="javascript:void(0);" @click="list(pager.begin-pager.step)">&larr;</a></li>
							</ul>
							<ul class="pagination" v-for="n in pager.end+1-pager.begin">
								<li :class="pager.begin+n-1==pager.index?'active':''">
									<a href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
								</li>
							</ul>
							<ul class="pagination">
								<li><a href="javascript:void(0);" @click="list(pager.begin+pager.step)">&rarr;</a></li>
								<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
							</ul>
						</td>
					</tr>
				</tfoot>
			</table>
			<div id="mymodal" class="modal">
				<div class="modal-dialog" data-backdrop="static">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">&times;</button>
							<h4>{{title}}</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" action="" onsubmit="return false" method="post">
								<div class="form-group">
									<label class="col-sm-4 control-label text-right">用户名:</label>
									<div class="col-sm-4">
										<input type="text" id="urname"  class="form-control" pattern="^\w{5,20}$"
											required placeholder="请输入用户名" />
									</div>
									<p class="col-sm-4 help-block">用户名不能为空</p>
								</div>
								<div class="form-group">
									<label class="col-sm-4 control-label text-right">员工姓名:</label>
									<div class="col-sm-4">
										<input type="text" id="urnamezh" class="form-control" required
											placeholder="请输入员工姓名" />
									</div>
									<p class="col-sm-4 help-block">员工姓名不能为空</p>
								</div>
								<div class="form-group">
									<label class="col-sm-4 control-label text-right">请选择员工职位:</label>
									<div class="col-sm-4">
										<select id="urreid" class="form-control" v-model="reid">
											<option v-for="role in roles" v-if="role.reid != 1" :value="role.reid" >{{role.renamezh}}
											</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-4 col-sm-offset-4">
										<input type="hidden" id="urid" /> <input type="submit"
											class="btn btn-default" value="确定" @click="save()" /> <input type="button"
											data-dismiss="modal" class="btn btn-default" value="取消" />
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					index: 1,
					size: 5,
					step: 10,
					pager: {},
					urname: "",
					sta:"0",
					statusS:{},
					roles: {},
					reid:"4",
					title: ""
				},
				methods: {
					list: function(index) {
						var self = this;
						self.index = index;
						var url = "${root}/manage/user/userlist?urname=" +
						self.urname+"&sta=" + self.sta  + "&index=" + self.index + "&size=" +
						self.size + "&step=" + self.step;
						axios.get(url).then(function(res) {
							if(res.data.code=="500"){
								alert(res.data.message);
							}else{
								self.pager = res.data;
							}
						});
					},
					search: function() {
						var self = this;
						self.index = 1;
						self.sta = "0";
						self.list(self.index);
					},
					changeSt:function(){
						var self = this;
						self.urname = "";
						self.index = 1;
						self.list(self.index);
					},
					getStatus : function() {
						var self = this;
						var url = "${root}/dict/list?tid=1";
						axios.get(url).then(function(res) {
							self.statusS = res.data
						});
					},
					getRoles: function() {
						var self = this;
						var url = "${root}/manage/user/rolelist";
						axios.get(url).then(function(res) {
							self.roles = res.data;
						});
					},
					add: function() {
						var self = this;
						self.title = "员工信息添加";
						$("#urname").val("");
						$("#urnamezh").val("");
						$("#mymodal").modal('show');
					},
					update: function(user) {
						var self = this;
						self.title = "员工信息修改";
						self.reid=user.urreid;
						$("#urname").val(user.urname);
						$("#urnamezh").val(user.urnamezh);
						$("#urid").val(user.urid);
						$("#mymodal").modal('show');
					},
					save: function() {
						var self = this;
						var count = 0;
						var url;
						var fd = new FormData();
						var urname = document.getElementById("urname");
						var urnamezh = document.getElementById("urnamezh");
						var urid = document.getElementById("urid");

						if (urname.validity.valueMissing) {
							urname.setCustomValidity("登录名不能为空");
						} else if (urname.validity.patternMismatch) {
							urname.setCustomValidity("用户名必须是5到20位有效字符");
						} else {
							urname.setCustomValidity("");
							count++;
						}

						if (urnamezh.validity.valueMissing) {
							urnamezh.setCustomValidity("用户姓名不能为空");
						} else {
							urnamezh.setCustomValidity("");
							count++;
						}
						
						if (count == 2) {
							if (urid.value.length == 0) {
								url = "${root}/manage/user/add";
							} else {
								url = "${root}/manage/user/update";
								fd.append("urid", urid.value);
							}
							fd.append("urname", urname.value);
							fd.append("urnamezh", urnamezh.value);
							fd.append("urreid", self.reid);
							axios.post(url, fd).then(function(res) {
								alert(res.data.message);
								$("#mymodal").modal("hide");
								self.list(self.index);
							});
						}
					},
					lock: function(id) {
						var self = this;
						var url = "${root}/manage/user/lock?id=" + id;
						axios.get(url).then(function(res) {
							alert(res.data.message);
							self.list(self.index);
						});
					},
					unlock: function(id) {
						var self = this;
						var url = "${root}/manage/user/unlock?id=" + id;
						axios.get(url).then(function(res) {
							alert(res.data.message);
							self.list(self.index);
						});
					},
					out: function(id) {
						var self = this;
						var url = "${root}/manage/user/out?id=" + id;
						axios.get(url).then(function(res) {
							alert(res.data.message);
							self.list(self.index);
						});
					}
				},
				mounted: function() {
					this.list(this.index);
					this.getStatus();
					this.getRoles();
				}
			})
		</script>
	</body>
</html>
